<template>
  <div id="shop-city">
    <nav-bar class="shop-city-nav">
      <div slot="center">美丽说商城</div>
    </nav-bar>
    <tab-control class="tab-control"
                 :tab-items="['流行', '新款', '精选']"
                 @tabClick="tabClick"
                 ref="tabControlFix"
                 v-show="tabControlShow"></tab-control>
    <b-scroll class="shop-city-scroll"
              ref="BScroll"
              :probe-type="3"
              :pull-up-load="true"
              @scroll="scroll"
              @pullingUp="pullingUp">
      <swiper :banners="banners"
              @imageLoad="getTabColHeight"></swiper>
      <div class="shop-city-body">
        <recommends class="main-box"
                    :recommends="recommends"></recommends>
        <recommend-view class="main-box"></recommend-view>
        <tab-control class="tab-control main-box"
                     :tab-items="['流行', '新款', '精选']"
                     @tabClick="tabClick"
                     ref="tabControl"
                     v-show="!tabControlShow"></tab-control>
        <goods-list :goods="goods[goodsType].list"></goods-list>
      </div>
    </b-scroll>
    <back-top class="back-top"
              @click.native="scrollTo" v-show="backTopShow"></back-top>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import Swiper from "@/views/shop_city/childComponents/Swiper";
import Recommends from "@/views/shop_city/childComponents/Recommends";
import RecommendView from "@/views/shop_city/childComponents/RecommendView";
import TabControl from "@/components/content/tabControl/TabControl";
import GoodsList from "@/components/content/goodsList/GoodsList";
import BScroll from "@/components/common/bScroll/BScroll";
import BackTop from "@/components/content/backTop/BackTop";
import {getShopCityDate, getShopCityGoods} from "@/network/shop_city";

export default {
  name: "ShopCity",
  data() {
    return {
      banners: [],//轮播图数据
      recommends: [],//推荐模块数据
      goods: {//商品模块数据
        pop: {page: 0, list: []},
        new: {page: 0, list: []},
        sell: {page: 0, list: []},
      },
      goodsType: 'pop',
      backTopShow: false,
      tabControlShow: false,
      tabControlHeight: 0,
      saveY: 0
    }
  },
  methods: {
    /*
    * 事件监听的方法
    */
    tabClick(index) {
      switch (index) {
        case 0:
          this.goodsType = 'pop';
          break;
        case 1:
          this.goodsType = 'new';
          break;
        case 2:
          this.goodsType = 'sell';
          break;
      }
      this.$refs.BScroll.refresh();
      this.$refs.tabControlFix.currentIndex = index;
      this.$refs.tabControl.currentIndex = index;
    },

    scrollTo() {
      this.$refs.BScroll.scrollTo(0, 0)
    },

    scroll(position) {
      let positionY = -position.y
      //显示隐藏回到顶部按钮
      this.backTopShow = positionY > this.tabControlHeight
      //固定tab-control
      this.tabControlShow = positionY > this.tabControlHeight
    },

    pullingUp() {
      this.toGetShopCityGoods(this.goodsType);
      this.$refs.BScroll.finishPullUp();
      this.$refs.BScroll.refresh();
    },

    getTabColHeight() {
      this.tabControlHeight = this.$refs.tabControl.$el.offsetTop;
    },

    /*
    * 网络请求所调用的方法
    */
    toGetShopCityDate() {
      getShopCityDate().then(data => {
        this.banners = data.data.banner.list;
        this.recommends = data.data.recommend.list;
      })
    },

    toGetShopCityGoods(type) {
      const page = this.goods[type].page + 1;
      getShopCityGoods(type, page).then(data => {
        //数组解构，将接收到的数据传入data函数
        this.goods[type].list.push(...data.data.list);
        //页码+1，方便下一次接收参数
        this.goods[type].page += 1;
        this.$refs.BScroll.refresh();
      })
    }
  },
  components: {
    NavBar,
    Swiper,
    Recommends,
    RecommendView,
    TabControl,
    GoodsList,
    BScroll,
    BackTop
  },
  created() {
    this.toGetShopCityDate();
    this.toGetShopCityGoods('pop');
    this.toGetShopCityGoods('new');
    this.toGetShopCityGoods('sell');
  },
  deactivated() {
    this.saveY = this.$refs.BScroll.bScroll.y;
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.BScroll.scrollTo(0, this.saveY, 0);
      this.$refs.BScroll.refresh();
    })
  }
}
</script>

<style scoped>
#shop-city {
  background-color: #f6f6f6;
}
.shop-city-nav {
  color: #ffffff;
  font-size: 20px;
  background-color: var(--color-tint);
}

.tab-control {
  position: sticky;
  top: 44px;
  left: 0;
  right: 0;
  background-color: #fff;
}

.shop-city-scroll {
  height: calc(100vh - 89px);
  overflow: hidden;
}

.back-top {
  position: fixed;
  right: 15px;
  bottom: 55px;
  z-index: 999;
}
.shop-city-body {
  padding: 10px 5px;
}
.main-box {
  overflow: hidden;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
}
</style>
